/*
 * Copyright © 2018 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
*/

@import "../../../styles/mixins.scss";
@import "../../../styles/variables.scss";

$enabled-color: $green-02;

.compute-tab-content {
  height: 100%;
}
.profiles-list-view-on-pipeline {
  height: calc(100% - 70px); // 70px for the buttons at the bottom

  &.empty-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  > div {
    height: 100%;
  }
  .grid-wrapper {
    height: 100%;
    overflow: auto;
  }
  .grid.grid-container {
    // This will be the case when we show profiles list view in payload config
    // When it is disabled we show only the selected profile (if any).
    // which will have only one row. So when we set height to 100% grid
    // rows expand vertically to fill in the gap. Hence the grid-auto-rows.

    // TODO: Check how the fallback works in this case.
    height: 100%;
    grid-auto-rows: 40px;
    max-height: calc(100% - 50px); // 100% - 17px (title) - 30px (profile count)

    .grid-row {
      grid-template-columns: 30px 1.3fr 1fr 1.3fr 0.8fr 70px 1fr 50px;
      align-items: center;
      white-space: nowrap;

      &.enabled {
        .profile-status {
          color: $enabled-color;
        }
      }
      &.disabled {
        cursor: not-allowed;

        > div {
          &:not(:last-child) {
            opacity: 0.5;
          }
        }
      }
    }
    .grid-header {
      z-index: 1;

      .grid-row {
        background: $grey-07;
      }
    }
    .grid-body {
      .grid-row {
        padding: 3px 0;
        // FIXME: This should be moved to the common styles. We should use the same
        // pattern in all the tables.
        &.active {
          background: $yellow-02-lighter;
        }
        a {
          &:hover {
            text-decoration: underline;
          }
        }
        .icon-star {
          color: var(--brand-primary-color);
          margin-right: 5px;
        }
        .profile-label {
          white-space: nowrap;
        }
      }
    }
    &.disabled {
      .grid-body {
        .grid-row {
          &:hover,
          &.active {
            background: $grey-07;
          }
        }
      }
    }
  }
  .profiles-count {
    color: $grey-04;
    margin: 5px 0;
  }
}
